<!--
 * @Author: gaojinyu 1593026814@qq.com
 * @Date: 2023-12-21 10:22:34
 * @LastEditors: gaojinyu 1593026814@qq.com
 * @LastEditTime: 2024-01-09 16:22:30
 * @FilePath: \test\src\components\BussComponents\ProvideOldPeople.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <BoxTitleInLeft title="品质养老">
    <template #body>
      <div class="provide_content">
        <div class="row1">
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in imgList" :key="item">
              <img :src="item.url" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="row2">
          <span>70岁以上老人</span>
          <div class="count">
            <div class="count_item" v-for="item in count.split('')">
              {{ item }}
            </div>
          </div>
        </div>
        <div class="row3">
          <VCharts :chartOption="chartData.option13()"></VCharts>
        </div>
      </div>
    </template>
  </BoxTitleInLeft>
</template>

<script setup>
import chartData from "@/config/chartOption.js";
import { reactive, ref } from "vue";
let imgList = reactive([
  {
    url: require("../../assets/images/1.png"),
  },
  {
    url: require("../../assets/images/2.png"),
  },
  {
    url: require("../../assets/images/3.png"),
  },
]);
const count = ref("00001194");
</script>

<style lang="scss" scoped>
.provide_content {
  height: 100%;
  @include display(flex-start, center, column);
  & > div {
    height: 0;
    width: 100%;
    padding: 0 60px;
    box-sizing: border-box;
  }
  .row1 {
    flex-grow: 0.8;
    img {
      width: 100%;
    }
  }
  .row2 {
    flex-grow: 1;
    @include display(center, center, column);
    span {
      font-size: 28px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 10px;
    }
    .count {
      @include display(center, center, row);
      .count_item {
        width: 58px;
        height: 84px;
        background: url(~@/assets/images/number_bg.png);
        background-size: 100% 100%;
        font-size: 60px;
        font-family: Impact, Impact-Regular;
        font-weight: 400;
        color: #ffffff;
        @include display(center, center, row);
        margin: 0 8px;
      }
    }
  }
  .row3 {
    flex-grow: 1;
  }
}

::v-deep .el-carousel {
  height: 100%;
  .el-carousel__container {
    height: 100% !important;
    .el-carousel__item {
      border-radius: 10px !important;

      .el-carousel__mask{
        background: #000000 !important;
        opacity:0.65;
      }
    }
  }
}
</style>
